<template>
  <el-card>
    <el-row class="header" :gutter="20">
      <el-col :span="7">
        <el-input
          :placeholder="$t('table.placeholder')"
          clearable
          v-model="queryForm.query"
          ></el-input>
      </el-col>
      <el-button type="primary" :icon="Search" @click="change">{{$t('table.search')}}</el-button>
      <el-button type="primary" @click="changelog()">{{$t('table.adduser')}}</el-button>
    </el-row>

    <el-table :data="tableData" border style="width: 100%">
      <el-table-column
        :width="item.width"
        :prop="item.prop"
        :label="$t(`table.${item.label}`)"
        v-for="(item,index) in options"
        :key="index"
      >
      <!-- 自定义 -->
      <template v-slot="{row}" v-if="item.prop === 'mg_state'">
        <el-switch v-model="row.mg_state" @change="changeState(row)" />
      </template>
      <template v-slot="{row}" v-else-if="item.prop === 'create_time'">
        {{$filters.filterTimes(row.create_time)}}
      </template>

      <template #default="{row}" v-else-if="item.prop === 'action'" >
        <el-button
          type="primary"
          size="small"
          :icon="Edit"
          @click="changelog(row)"
          ></el-button>
        <el-button type="warning" size="small" :icon="Setting" ></el-button>
        <el-button type="danger" size="small" :icon="Delete" @click="delData(row)" ></el-button>
      </template>
      </el-table-column>
    </el-table>

    <el-pagination
      v-model:currentPage="queryForm.pagenum"
      v-model:page-size="queryForm.pagesize"
      :page-sizes="[2, 5, 10, 15]"
      layout="sizes, prev, pager, next"
      :total=total
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
    <!-- 弹出框 -->
    <Dialog
      v-model="dialogVisible"
      :dialogTitle="dialogTitle"
      v-if="dialogVisible"
      @initUserList="change()"
      :dialogTableValue='dialogTableValue'
    />
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { getUsers, changeUserState, delUser } from '@/api/users'
import { options } from './options'
import { Search, Edit, Setting, Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useI18n } from 'vue-i18n'
import Dialog from './components/Dialog.vue'
import { isNull } from '@/utils/filters'

// 调用插件
const i18n = useI18n()
const queryForm = ref({
  query: '',
  pagenum: 1,
  pagesize: 2
})

const total = ref(0)
// 获取用户列表数据
const tableData = ref([])
const change = async () => {
  const info = await getUsers(queryForm.value)
  total.value = info.total
  tableData.value = info.users
}
change()

// 点击事件
const handleSizeChange = (pageSize) => {
  queryForm.value.pagenum = 1
  queryForm.value.pageSize = pageSize
  change()
}
const handleCurrentChange = (pageNum) => {
  queryForm.value.pageNum = pageNum
  change()
}
// 点击改变状态
const changeState = async (info) => {
  await changeUserState(info.id, info.mg_state)
  ElMessage({
    message: i18n.t('message.updeteSuccess'),
    type: 'success'
  })
}

// 点击是否显示弹出框
// 点击传标题过去
const dialogTitle = ref('')
const dialogTableValue = ref({})
const dialogVisible = ref(false)
const changelog = (row) => {
  // isNull 判断是否为空
  if (isNull(row)) {
    dialogTitle.value = '添加用户'
    dialogTableValue.value = {}
  } else {
    dialogTitle.value = '编辑用户'
    dialogTableValue.value = JSON.parse(JSON.stringify(row))
  }
  // 弹出框初始值
  dialogVisible.value = true
}
// 删除操作
const delData = (row) => {
  ElMessageBox.confirm(
    i18n.t('dialog.deleteTitle'),
    'Warning',
    {
      confirmButtonText: 'OK',
      cancelButtonText: 'Cancel',
      type: 'warning'
    }
  )
    .then(async () => {
      await delUser(row.id)
      change()
      ElMessage({
        type: 'success',
        message: '删除成功'
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '已取消'
      })
    })
}

</script>

<style lang="scss" scoped>
.header{
  padding-bottom: 16px;
  box-sizing: border-box;
}
</style>
